<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-10-31 15:18:44
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-01-17 14:27:08
 * @FilePath: \v2.0.0\src\views\patroling\PatrolingTimingList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    :model-value="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <template #header>
      <div class="text-center text-3xl font-bold">{{ title }}</div>
    </template>
    <template #default>
      <MyTable v-loading="loading" :data="list" :columns="columns"></MyTable>
    </template>
    <template #footer>
      <div class="flex">
        <div
          class="flex-1 bg-[#ff931e] text-center text-white cursor-pointer text-xl py-3 rounded"
          @click="handleConfirm"
        >
          确定
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { toRefs, ref, watch } from "vue";
import {
  getTimingTaskList,
  deleteTimingTask,
} from "@/api/robot-timing-task.js";
import MyTable from "@/components/MyTable.vue";
import { ElMessageBox } from "element-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:visible"]);

const { visible } = toRefs(props);

function handleConfirm() {
  emit("update:visible", false);
}

const columns = [
  {
    label: "机器人编码",
    prop: "code",
  },
  {
    label: "路径模板",
    prop: "missionId",
  },
  {
    label: "循环条件",
    prop: "loopConditions",
  },
  {
    label: "循环时间",
    prop: "conditions",
  },
  {
    label: "充电任务",
    prop: "changeMission",
  },
  {
    label: "返回结果",
    prop: "result",
  },
  {
    label: "下发时间",
    prop: "time",
  },
  {
    label: "操作",
    prop: "action",
    minWidth: 100,
    customRender(row) {
      return (
        <div data-test="delete-button">
          <el-button link onClick={() => handleDelete(row.id)}>
            删除
          </el-button>
        </div>
      );
    },
  },
];

/**
 * @description: 删除定时任务
 * @param {*} id
 * @return {*}
 */
function handleDelete(id) {
  ElMessageBox.confirm("确定要删除吗？").then(async () => {
    await deleteTimingTask(id);
    getTimingList();
  });
}

const list = ref([]);
const loading = ref(false);
async function getTimingList() {
  loading.value = true;
  const { data = {} } = await getTimingTaskList();
  loading.value = false;
  list.value = data.list || [];
}

watch(visible, () => {
  if (!visible.value) return;
  getTimingList();
});
</script>
